<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-17 10:13:29
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2023-10-18 10:24:18
 * @FilePath: \hy-ui\src\views\app\appInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    custom-class="bigClassAdd"
    title="新增"
    :visible.sync="open"
    width="80%"
    :before-close="close"
  >
    <el-form ref="form" :model="form" label-width="120px"  class="demo-ruleForm" :rules="rules">
      <div class="box">
        <el-form-item label="名称" prop="name" >
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入名称"
            
          />
        </el-form-item>
        <el-form-item label="描述" prop="remark" >
          <el-input
            v-model="form.remark"
            clearable
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort" >
          <el-input
            v-model="form.sort"
            clearable
            placeholder="请输入排序"
            type="number"
          />
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  listAppInfo,
  getAppInfo,
  delAppInfo,
  addAppInfo,
  updateAppInfo,
} from "@/api/app/appInfo";
import { listAppCategory, getAppCategory,addAppCategory } from "@/api/app/appCategory";

export default {
  name: "bigClassAdd",
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    getList:{
      type: Function,
      default: () => {},  
    }
  },
  data() {
    return {
      form: {},
      rules:{
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            {  max: 10, message: '长度最多10个字符', trigger: 'blur' }
          ],
      }
    };
  },
  methods: {
    handleSubmit(){
         this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const res = await addAppCategory(this.form)
            if(res.code == 200) {
                this.$message.success('新增成功')
                this.close()
                this.getList()
            }
          } 
        });
    }
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  display: grid;
  // grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;
  // grid-template-rows: auto auto;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-items: stretch;
  align-items: start;
}
</style>
